<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父传子</title>
</head>
<body>

<div id="app">
<blog-post
  v-for="post in posts"
  :title="post.title"
  :content="post.content">
</blog-post>
</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('blog-post', {
    props: ['title', 'content'],
    template: `
      <div>
        <h3>{{ title }}</h3>
        <div>{{ content }}</div>
      </div>
    `
  })


let vm = new Vue({
  el: '#app',
  data: {
    posts: [
      {id: 1, title: '标题1', content: '内容1'},
      {id: 2, title: '标题2', content: '内容2'},
      {id: 3, title: '标题3', content: '内容3'}
    ]
  }
})
</script>

</body>
</html>